import Head from 'next/head';
import Link from 'next/link';
import { Row, Col, Card, Typography } from 'antd';
import { CompressOutlined, ScissorOutlined } from '@ant-design/icons';
import MainLayout from '../../components/layout/MainLayout';

const { Title, Paragraph } = Typography;

export default function FileTools() {
  const fileTools = [
    {
      title: '文件压缩',
      description: '压缩文件以减小存储空间，支持ZIP格式',
      icon: <CompressOutlined />,
      path: '/file-tools/compress'
    },
    {
      title: '文件分割',
      description: '将大文件分割成多个小文件，方便传输和存储',
      icon: <ScissorOutlined />,
      path: '/file-tools/split'
    }
  ];

  return (
    <MainLayout>
      <Head>
        <title>文件工具 - 在线工具平台</title>
        <meta name="description" content="提供文件压缩、分割等多种在线文件处理工具，简单高效" />
      </Head>

      <div className="page-header">
        <Title>文件工具</Title>
        <Paragraph>
          多种在线文件处理工具，帮助您快速处理文件，无需专业软件
        </Paragraph>
      </div>

      <div className="tool-cards">
        <Row gutter={[24, 24]}>
          {fileTools.map((tool, index) => (
            <Col xs={24} sm={12} md={8} key={index}>
              <Link href={tool.path}>
                <Card
                  hoverable
                  className="tool-card"
                  cover={
                    <div className="tool-icon-wrapper">
                      {tool.icon}
                    </div>
                  }
                >
                  <Card.Meta
                    title={tool.title}
                    description={tool.description}
                  />
                </Card>
              </Link>
            </Col>
          ))}
        </Row>
      </div>
    </MainLayout>
  );
} 